<template>
  <div class="dashboard">
    <h1>系统概览</h1>

    <div class="dashboard-cards">
      <div class="card">
        <h3>图书总数</h3>
        <div class="number">{{ dashboardData.totalBooks }}</div>
      </div>
      <div class="card">
        <h3>在库图书</h3>
        <div class="number">{{ dashboardData.availableBooks }}</div>
      </div>
      <div class="card">
        <h3>读者总数</h3>
        <div class="number">{{ dashboardData.totalReaders }}</div>
      </div>
      <div class="card">
        <h3>管理员数</h3>
        <div class="number">{{ dashboardData.totalAdmins }}</div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h3>最近添加的图书</h3>
      </div>
      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>ISBN</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>状态</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="book in recentBooks" :key="book.id">
            <td>{{ book.isbn }}</td>
            <td>{{ book.title }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.publisher }}</td>
            <td>
                <span :class="'status-' + (book.status === '在库' ? 'available' : 'borrowed')">
                  {{ book.status }}
                </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import BookService from '@/services/book';

export default {
  setup() {
    const dashboardData = ref({
      totalBooks: 0,
      availableBooks: 0,
      totalReaders: 0,
      totalAdmins: 0
    });

    const recentBooks = ref([]);

    const loadDashboardData = async () => {
      try {
        const data = await BookService.getDashboardData();
        dashboardData.value = data;
      } catch (error) {
        console.error('获取仪表盘数据失败:', error);
      }
    };

    const loadRecentBooks = async () => {
      try {
        const books = await BookService.getRecentBooks();
        recentBooks.value = books;
      } catch (error) {
        console.error('获取最近图书失败:', error);
      }
    };

    onMounted(() => {
      loadDashboardData();
      loadRecentBooks();
    });

    return {
      dashboardData,
      recentBooks
    };
  }
};
</script>

<style scoped>
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.dashboard-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s;
}

.dashboard-card:hover {
  transform: translateY(-5px);
}

.dashboard-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--dark-color);
}

.dashboard-card .number {
  font-size: 36px;
  font-weight: bold;
  color: var(--primary-color);
}

.status-available {
  color: var(--secondary-color);
  font-weight: bold;
}

.status-borrowed {
  color: var(--danger-color);
  font-weight: bold;
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
}

tr:hover {
  background-color: #f8f9fa;
}
</style>